<!-- subpkg_consult/room/components/message-info.vue -->
<script setup>
	import dayjs from 'dayjs'
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user.js'
	const { userId } = storeToRefs(useUserStore())
	defineProps({
		info: {
			type: Object,
			default: {},
		},
		type: {
			type: Number,
			default: 1,
		},
	})
	const dateFormat = (date) => {
		return dayjs(date).format('hh:mm:ss')
	}
</script>

<template>
	<!-- 文字/图片消息 -->
	<view class="message-item" :class="{ reverse: info.from === userId }">
		<image class="room-avatar" :src="info.fromAvatar" />
		<view class="room-message">
			<view class="time">{{ dateFormat(info.createTime) }}</view>
			<view v-if="type === 1" class="text">
				{{ info.msg.content }}
			</view>
			<image
				v-if="type === 4"
				class="image"
				:src="info.msg.picture.url"
				mode="widthFix"
			/>
		</view>
	</view>
</template>

<style lang="scss">
	.message-item {
		display: flex;
		align-self: flex-start;
		margin-top: 60rpx;

		.room-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.room-message {
			margin-left: 20rpx;
		}

		.time {
			font-size: 26rpx;
			color: #979797;
		}

		.image {
			max-width: 420rpx;
			margin-top: 10rpx;
		}

		.text {
			max-width: 420rpx;
			line-height: 1.75;
			padding: 30rpx 40rpx;
			margin-top: 16rpx;
			border-radius: 20rpx;
			font-size: 30rpx;
			color: #3c3e42;
			background-color: #fff;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: -25rpx;
				width: 26rpx;
				height: 52rpx;
				background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
				background-size: contain;
			}
		}

		&.reverse {
			flex-direction: row-reverse;
			align-self: flex-end;

			.room-message {
				margin-left: 0;
				margin-right: 20rpx;
			}

			.time {
				text-align: right;
			}

			.text {
				background-color: #16c2a3;
				color: #fff;

				&::after {
					left: auto;
					right: -25rpx;
					background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
				}
			}
		}
	}
</style>
